<template>
  <div class="wrapper">
    <!-- header部分 -->
    <i class="fa fa-angle-left back-icon" @click="goBack"></i>
    <header>
      <p>用户登录</p>
    </header>
    <!-- 表单部分 -->
    <ul class="form-box">
      <li>
        <div class="title">手机号码：</div>
        <div class="content">
          <input type="text" v-model="userId" placeholder="手机号码" maxlength="11" @blur="validatePhoneNumber" />
          <p v-if="phoneError" class="error">{{ phoneError }}</p>
        </div>
      </li>
      <li>
        <div class="title">密码：</div>
        <div class="content">
          <input type="password" v-model="password" placeholder="密码" @blur="validatePassword" />
          <p v-if="passwordError" class="error">{{ passwordError }}</p>
        </div>
      </li>
    </ul>
    <div class="button-login">
      <button @click="login" :disabled="loading">
        {{ loading ? '登录中...' : '登录' }}
      </button>
    </div>

    <div class="button-register">
      <button @click="register">去注册</button>
    </div>
  </div>
</template>

<script>
import axios from 'axios'; // 导入 axios

export default {
  /* eslint-disable */
  name: "LoginPage",
  data() {
    return {
      userId: "",
      password: "",
      phoneError: "",
      passwordError: "",
      loading: false  // 添加loading状态
    };
  },
  methods: {
    // 验证手机号码
    validatePhoneNumber() {
      if (!this.userId) {
        this.phoneError = "手机号码不能为空";
      } else {
        this.phoneError = "";  // 如果手机号码不为空，则不显示错误
      }
    },

    // 验证密码
    validatePassword() {
      if (!this.password) {
        this.passwordError = "密码不能为空";
      } else if (this.password.length < 1) {
        this.passwordError = "密码长度至少1位";
      } else {
        this.passwordError = "";
      }
    },
    // 登录方法
    login() {
      if (this.loading) return;  // 防止多次点击

      this.validatePhoneNumber();
      this.validatePassword();

      if (this.phoneError || this.passwordError) {
        return;
      }

      const loginData = {
        userId: this.userId,
        password: this.password
      };

      this.loading = true;  // 开启loading状态

      axios
        .post("/UserController/getUserByIdByPass", loginData)
        .then((response) => {
          this.loading = false;  // 请求完成，关闭loading状态

          if (response.data.success) {
            const user = response.data.data;
            // 登录成功后，保存用户登录状态
            sessionStorage.setItem('user', JSON.stringify(user));
            localStorage.setItem("isLoggedIn",'true')

            // 跳转到首页或其他页面
            this.$router.push('/index');
          } else {
            alert("登录失败：" + response.data.message);
          }
        })
        .catch((error) => {
          this.loading = false;  // 请求失败，关闭loading状态
          console.error("登录请求错误", error);
          alert("登录失败，请稍后重试");
        });
    },

    // 跳转到注册页面
    register() {
      this.$router.push("/register");
    },
    // 返回上一页
    goBack() {
      this.$router.go(-1);
    }
  },
};
</script>


<style scoped>
/****************** 总容器 ******************/
.wrapper {
  width: 100%;
  height: 100%;
}

/****************** header部分 ******************/
.wrapper header {
  width: 100%;
  height: 12vw;
  background: royalblue;
  color: #fff;
  font-size: 4.8vw;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

/****************** 表单部分 ******************/
.wrapper .form-box {
  width: 100%;
  margin-top: 12vw;
}

.wrapper .form-box li {
  box-sizing: border-box;
  padding: 4vw 3vw 0 3vw;
  display: flex;
  align-items: center;
}

.wrapper .form-box li .title {
  flex: 0 0 18vw;
  font-size: 3vw;
  font-weight: 700;
  color: #666;
}

.wrapper .form-box li .content {
  flex: 1;
}

.wrapper .form-box li .content input {
  border: none;
  outline: none;
  width: 100%;
  height: 4vw;
  font-size: 3vw;
}

.button-login button:disabled {
  background-color: #ccc;
  /* 灰色背景表示禁用状态 */
  cursor: not-allowed;
  /* 鼠标指针为禁用状态 */
  opacity: 0.7;
  /* 提高透明度，视觉效果 */
}


.wrapper .button-login {
  width: 100%;
  box-sizing: border-box;
  padding: 4vw 3vw 0 3vw;
}

.wrapper .button-login button {
  width: 100%;
  height: 10vw;
  font-size: 3.8vw;
  font-weight: 700;
  color: #fff;
  background: blue;
  border-radius: 4px;
  border: none;
  outline: none;
}

.wrapper .button-register {
  width: 100%;
  box-sizing: border-box;
  padding: 4vw 3vw 0 3vw;
}

.wrapper .button-register button {
  width: 100%;
  height: 10vw;
  font-size: 3.8vw;
  font-weight: 700;
  /*与上面登陆按钮不同的只有颜色、背景色、边框不同*/
  color: #666;
  background-color: #EEE;
  border: solid 1px #DDD;
  border-radius: 4px;
  border: none;
  outline: none;
}

/****************** 底部菜单部分 ******************/
.wrapper .footer {
  width: 100%;
  height: 14vw;
  border-top: solid 1px #DDD;
  background-color: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.wrapper .footer li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #999;
  user-select: none;
  cursor: pointer;
}

.wrapper .footer li p {
  font-size: 2.8vw;
}

.wrapper .footer li i {
  font-size: 5vw;
}

.back-icon {
  font-size: 36px;
  /* 保持大小 */
  position: fixed;
  top: 13px;
  left: 20px;
  color: #1a2edf;
  cursor: pointer;
  z-index: 2000;
  transition: transform 0.2s ease, color 0.2s ease;
  /* 添加过渡效果 */
}

.back-icon:hover {
  transform: scale(1.1);
  /* 鼠标悬停时放大 */
  color: #ff5733;
  /* 悬停时改变颜色 */
}


.error {
  color: red;
  font-size: 3vw;
  /* 保持与其他文本相近的比例 */
  margin-top: 1vw;
  /* 增加与输入框的间距 */
}
</style>
